<template>
    <v-scale-screen width="1920" height="1080" :fullScreen="true">
        <!-- 头部区域 -->
        <div class="dp_top">
            <!-- 返回、天气 -->
            <div class="dt_back_weather">
                <img class="dbw_fh" src="../../../assets/largescreen/new/top_back.png" alt="" @click="goBack">
                <div class="dbw_tianqi">
                    <img :src="qihouimg">
                    <div class="tianqi">{{tianqi}} {{wendu}}℃</div>
                </div>
            </div>
            <!-- 类型 -->
            <div class="dt_type dt_type_ykhx" @click="toTurn(1)"><div>游客画像</div></div>
            <div class="dt_type dt_type_jq" @click="toTurn(2)"><div>景区</div></div>
            <div class="dt_type dt_type_jdms selected_right" @click="toTurn(3)"><div>酒店民宿</div></div>
            <div class="dt_type dt_type_jt" @click="toTurn(4)"><div>交通</div></div>
            <!-- 当前时间 -->
            <div class="dt_time">{{ currentTime }}</div>
            <!-- 中间文字隐藏区域用于点击切换首页 -->
            <div class="dt_click" @click="toTurn(0)"></div>
        </div>
        <!-- 中间区域 -->
        <div class="dp_middle">
            <!-- 中间区域的左边部分 -->
            <div class="dm_left">
                <div class="box dp_box">
                    <div class="b_title">游客住宿分析</div>
                    <div class="db_content">
                        <div class="chart" ref="ykzsfxChart"></div>
                    </div>
                </div>

                <div class="box dp_box">
                    <div class="b_title">节假日入住分析</div>
                    <div class="db_content">
                        <div class="chart">
                            <div class="cb_title">
                                <img src="../../../assets/largescreen/jdms_user.png">
                                <p>年度累计客流<span>{{ jjrYearPersonNum }}</span>人次</p>
                            </div>
                            <div class="cb_chart_jjr">
                                <div ref="jjrrzfxChart"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="box dp_box">
                    <div class="b_title">酒店预约排行榜(月)</div>
                    <div class="db_content">
                        <div class="tableDiv_phb">
                            <vue-seamless-scroll ref="vueSeamlessPhbRef" class="scroll-list-seamless-phb" :data="copyDataPhb" :class-option="defaultOption" >
                                <ul class="ul-scoll">
                                    <li v-for="(item,index) in hotelOrderList" :key="index" class="td_item">
                                        <div class="tdi_left">
                                            <div class="tdil_top" :style="{'background-image':'url('+require('../../../assets/largescreen/top' + (index<3?index+1:4) + '.png')+')'}">TOP.{{ index+1 }}</div>
                                            <div class="tdil_name">{{ item.name }}</div>
                                        </div>
                                        <div class="tdi_right">{{ item.num }}</div>
                                    </li>
                                </ul>
                            </vue-seamless-scroll>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 中间区域的中间部分 -->
            <div class="dm_center">
                <div class="dmc_map">
                    <div class="dmcm_nums">
                        <div class="dn_pte">
                            <div class="title">今日订单数</div>
                            <div class="nums">
                                <div class="n_item" v-for="(num,idx) in todayNums" :key="idx">{{ num }}</div>
                            </div>
                        </div>
                        <div class="dn_pte">
                            <div class="title">今日预约订单</div>
                            <div class="nums">
                                <div class="n_item" v-for="(num,idx) in hotelNums" :key="idx">{{ num }}</div>
                            </div>
                        </div>
                        <div class="dn_pte">
                            <div class="title">今日入住人数</div>
                            <div class="nums">
                                <div class="n_item" v-for="(num,idx) in hotelRoomNUms" :key="idx">{{ num }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="box c_b_box">
                    <!-- 标题 -->
                    <div class="b_title">年度客流对比</div>
                    <div class="db_content">
                        <div class="chart" ref="ndyyqsChart"></div>
                    </div>
                </div>
            </div>
            <!-- 中间区域的右边部分 -->
            <div class="dm_right">
                <div class="box dp_box">
                    <div class="b_title">近7天预约趋势</div>
                    <div class="db_content">
                        <div class="chart" ref="yyqsChart"></div>
                    </div>
                </div>
                <div class="box dp_box">
                    <div class="b_title">入住均价</div>
                    <div class="db_content">
                        <div class="chart" ref="rzjjChart"></div>
                    </div>
                </div>
                <div class="box dp_box">
                    <div class="b_title">客流排名</div>
                    <div class="db_content">
                        <div class="mjzyx_pm">
                            <vue-seamless-scroll ref="vueSeamlessRef" class="scroll-list-seamless" :data="copyDatakL" :class-option="defaultOption" >
                                <ul class="ul-scoll">
                                    <li v-for="(item,index) in klRankingList" :key="index" class="mpm_item">
                                        <div class="mpmi_left">
                                            <div class="mpmil_top" :style="{'background-image':'url('+require('../../../assets/largescreen/top' + (index<3?index+1:4) + '.png')+')'}">TOP.{{ index+1 }}</div>
                                            <div class="mpmil_city">{{ item.city }}</div>
                                            <div class="mpmil_line"></div>
                                            <div class="mpmil_bl">
                                                <div class="mpmil_bl_bfb" :style="{'width':item.bl+'%'}"></div>
                                            </div>
                                        </div>
                                        <div class="mpmi_right">{{ item.num }}人次</div>
                                    </li>
                                </ul>
                            </vue-seamless-scroll>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 中间动态背景地图 -->
        <div class="dp_map"></div>
        <!-- 乡镇地图标记点 -->
        <div class="map_town"
            :class="townIndex===index?'town_active':''"
            :style="town.style"
            v-for="(town,index) in townList"
            :key="index"
            @click="changeTown(town.id,index)"
        >{{ town.name }}</div>
        <!-- 底部区域 -->
        <div class="dp_bottom"></div>
    </v-scale-screen>
</template>
<script>
    var sjTimer,refreshTimer;
    import * as echarts from "echarts";
    import 'echarts-gl';
    import vueSeamlessScroll from 'vue-seamless-scroll'

    export default {
        components: {
            vueSeamlessScroll
        },
        data() {
            return {
                // 头部
                qihouimg: '',   
                tianqi: '',
                wendu: '',
                currentTime:'',
                routerCfg:{
                    0:'/cockpit-home',
                    1:'/cockpit-cockpitjd',
                    2:'/cockpit-cockpitjj',
                    3:'/cockpit-cockpityk',
                    4:'/cockpit-cockpitjt'
                },
                // 中间区域
                todayNums:[],
                hotelNums:[],
                hotelRoomNUms:[],
                // 地图岛屿
                myislandId: [],
                townIndex:'',
                townList:[
                    {id:['4164678933'],name:'花鸟乡',style:{'left': '1058px','top': '290px'}},
                    {id:['1721484186251956225','1730426782508650497'],name:'洋山镇',style:{'left': '614px','top': '495px'}},
                    {id:['5554544444'],name:'菜园镇',style:{'left': '820px','top': '462px'}},
                    {id:['5554544444'],name:'五龙乡',style:{'left': '1017px','top': '477px'}},
                    {id:['1346784662'],name:'枸杞乡',style:{'left': '1180px','top': '501px'}},
                    {id:['4545454544'],name:'嵊山镇',style:{'left': '1307px','top': '485px'}},
                    {id:['5645645645'],name:'黄龙乡',style:{'left': '1054px','top': '612px'}}
                ],
                // 游客住宿分析
                hotelDict:{},
                // 节假日入住分享
                jjrYearPersonNum:'',
                // 酒店预约排行榜(月)
                copyDataPhb:[],
                hotelOrderList:[],
                //客流排名
                copyDatakL:[],
                klRankingList:[],
            }
        },
        created(){
            this.getWeather();
            this.getCurrentTime();
            sjTimer = setInterval(() => {
                this.getCurrentTime();
            }, 1000);
            this.init();
            refreshTimer = setInterval(() => {
                this.init();
            }, 15000);
        },
        computed: {
            defaultOption () {
                return {
                    step: 0.3, // 数值越大速度滚动越快
                    limitMoveNum: 1, // 开始无缝滚动的数据量
                    hoverStop: true, // 是否开启鼠标悬停stop
                    direction: 1, // 0向下 1向上 2向左 3向右
                    openWatch: true, // 开启数据实时监控刷新dom
                    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                }
            }
        },
        beforeDestroy(){
            clearInterval(sjTimer);
            clearInterval(refreshTimer);
        },
        methods:{
            getWeather(){
                let that=this;
                //加载天气查询插件
                AMap.plugin('AMap.Weather', function() {
                    //创建天气查询实例
                    let weather = new AMap.Weather();
                    //执行实时天气信息查询
                    weather.getLive('嵊泗县', function(err, data) {
                        if (data.info == 'OK') {
                            that.tianqi = data.weather;
                            that.wendu = data.temperature;
                            if (data.weather.indexOf("晴") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/8fff92353a984b2c923429c782e0f0ac.png';
                            } else if (data.weather.indexOf("暴雪") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/b4a84f8e5a7d41d49d69d6a6fcbcac9c.png';
                            } else if (data.weather.indexOf("暴雨") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/c3430daaf25c4315abcc046815f7dca2.png';
                            } else if (data.weather.indexOf("冰雹") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/1f7497a9725740e48e6ef06725680c9f.png';
                            } else if (data.weather.indexOf("大雪") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/8fbbaaf4564b4a5e9f10785bd83cb346.png';
                            } else if (data.weather.indexOf("大雨") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/b731ec5b2a974c1fbfdb2efcc18b9091.png';
                            } else if (data.weather.indexOf("多云") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/5c263447dab4446a980f086636b6cf34.png';
                            } else if (data.weather.indexOf("雷阵雨") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/7d65235177fa4156859fcbef8c057705.png';
                            } else if (data.weather.indexOf("雾") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/1d4ecb857a7e4ba9a00a8c210580955c.png';
                            } else if (data.weather.indexOf("小到中雨") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/0f3ba3c4eb1c4fd7950644473a5321e3.png';
                            } else if (data.weather.indexOf("小雪") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/3c9ccc8c449649c99c0f12b42bf5110d.png';
                            } else if (data.weather.indexOf("雨") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/4cbe88253ffb4f5899ef523c1c4d0b22.png';
                            } else if (data.weather.indexOf("阴") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/5e8e64175e034bdf8303da3acb174b19.png';
                            } else if (data.weather.indexOf("雨夹雪") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/10912cdd39114a9b96a794756a9cdb86.png';
                            } else if (data.weather.indexOf("阵雨@") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/607c0514d2364c2e8363c4886523fb0e.png';
                            } else if (data.weather.indexOf("中到大雨") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/2f2c4e797f884894a9bf3ab9b46663fe.png';
                            } else if (data.weather.indexOf("中雪") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/7166ea1b330845bcb146e87cfd532a9b.png';
                            } else if (data.weather.indexOf("中雨") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231220/a4e0a114e87a40dd8cffec07ba5ea83f.png';
                            }else if (data.weather.indexOf("霾") != -1) {
                                that.qihouimg =
                                    'https://i.ringzle.com/file/20231229/1f68b36db41748d3bf208cb86ce482cf.png';
                            }

                        }
                    });
                });
            },
            getCurrentTime(){
                this.currentTime = new Date().Format('yyyy-MM-dd hh:mm:ss')
            },
            goBack(){
                this.$router.replace({ path: '/home' })
            },
            toTurn(type){
                if(this.$route.path==this.routerCfg[type]) return
                this.$router.push({ path: this.routerCfg[type] });
            },
            async init(){
                await this.getHotelDict();
                this.initTopData();
                this.initChartYkzsfx();
                this.getKlUsersByYear();
                this.getDataHotelOrderMonth();
                this.initChartNdyyqs();
                this.initChartYyqs();
                this.initChartRzjj();
                this.getKlpmData();
            },

            //头部统计数据
            initTopData(){
                this.todayNums = [];
                this.hotelNums = [];
                this.hotelRoomNUms = [];
                this.$http.post('/sys/hotel/screen/getHotelScreenCount',{
                    islandIds:this.myislandId
                }).then(res=>{
                    if(res.data.code===0){
                        let tbr = (res.data.data.todayOrders||0)+'';
                        let hn = (res.data.data.todayBooks||0)+'';
                        let tr = (res.data.data.todayCheckIns||0)+'';
                        for (let i=0;i<tbr.length;i++){this.todayNums.push(tbr.substr(i,1))};
                        for (let i=0;i<hn.length;i++){this.hotelNums.push(hn.substr(i,1))};
                        for (let i=0;i<tr.length;i++){this.hotelRoomNUms.push(tr.substr(i,1))};
                    }else this.$message.error(res.data.msg);
                })
            },
            //游客住宿分析
            getHotelDict(){
                this.hotelDict = {};
                return new Promise((resolve,reject)=>{
                    this.$http.post('/api/dict/getListByTypes',['HotelCategory']).then(res=>{
                        if(res.data.code===0){
                            res.data.data.forEach(d=>{
                                this.hotelDict[d.dictValue] = d.dictLabel;
                            })
                            resolve();
                        }else reject({})
                    })
                })
            },
            initChartYkzsfx(){
                this.$http.post('/sys/hotel/screen/getHotelStayAnalysis',{
                    islandIds:this.myislandId
                }).then(res=>{
                    if(res.data.code===0){
                        let chartData = [];
                        if(res.data.data){
                            res.data.data.sort((a,b)=>{return b.ratio-a.ratio});
                            res.data.data.forEach(d=>{
                                chartData.push({
                                    name:this.hotelDict.toString()=="{}"?'其他':(this.hotelDict[d.category]||'其他'),
                                    value:d.visitorNums||0,
                                    bl:(d.ratio||0)+'%'
                                })
                            })
                        }
                        this.initChartYkzsfxChart(chartData);
                    }else this.$message.error(res.data.msg);
                })
            },
            initChartYkzsfxChart(chartData){
                let myChart = echarts.init(this.$refs.ykzsfxChart);
                let data = [];
                let xData = [];
                var color = ['#0771FF', '#0CFF9A', '#EA3D75', '#FE5C12', '#B315FF'];
                for (var i = 0; i < chartData.length; i++) {
                    data.push(
                        {
                            value: chartData[i].value,
                            name: chartData[i].name,
                            itemStyle: {
                                normal: {
                                    borderWidth: 6,
                                    shadowBlur: 10,
                                    borderRadius: 10, // 圆角
                                    borderColor: color[i],
                                    shadowColor: color[i],
                                    color: color[i]
                                }
                            }
                        },
                        {
                            value: 0.5,
                            name: '',
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    color: 'rgba(0, 0, 0, 0)',
                                    borderColor: 'rgba(0, 0, 0, 0)',
                                    borderWidth: 0
                                }
                            }
                        }
                    );
                    xData.push(chartData[i].name);
                }
                let option = {
                    backgroundColor: '#0E1327',
                    legend: {
                        textStyle: {
                            color: "#373737",
                            fontSize: "12px",
                            rich: {
                                name: {
                                    color: '#C6D7F1',
                                    fontSize: 14,
                                    width:120,
                                    fontWeight: 400,
                                    padding:[0,0,0,2]
                                },
                                bl:{
                                    color: '#C6D7F1',
                                    fontSize: 16,
                                    fontWeight: 600,
                                    fontFamily:'D-DINExp, D-DINExp',
                                    padding:[0,0,0,-15]
                                }
                            }
                        },
                        top: "center",
                        right: "5%",
                        itemGap: 15,
                        itemHeight: 14,
                        itemWidth: 8,
                        data: chartData.name,
                        formatter: function(name){
                            let obj = {};
                            if (name){
                            obj = chartData.find(item=>item.name === name)
                            }
                            return `{name|${name}}{bl|${obj.bl || '0%'}}`
                        },
                        orient: 'vertical',
                        icon: 'circle',
                        data: xData,
                    },
                    grid: {
                        containLabel: true,
                    },
                    series: [
                        {
                            name: 'pie2',
                            type: 'pie',
                            radius: [78, 80],
                            center: ['35%', '50%'],
                            color: 'transparent',
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            data: [1],
                            silent: true
                        },
                        {
                            type: 'pie',
                            radius: ['65%', '70%'],
                            center: ['25%', '50%'],
                            grid: {
                                containLabel: true
                            },
                            label: {
                                show: false,
                                position: 'center',
                                formatter: '{c_style|{c}}\n{b_style|{b}}',
                                rich: {
                                    b_style: {
                                        color: "#C6D7F1",
                                        fontSize: 14,
                                        fontWeight: "400",
                                        padding: [0, 0, 10, 0],
                                    },
                                    c_style: {
                                        color: "#C6D7F1",
                                        fontSize: 18,
                                        fontWeight: "600",
                                        fontFamily:'D-DINExp, D-DINExp'
                                    }
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data:data
                        }
                    ]
                }

                myChart.setOption(option);
                this.resizeEcharts(this.$refs.ykzsfxChart);
            },
            // 节假日入住分析
            getKlUsersByYear(){
                this.$http.post('/sys/hotel/screen/getHotelVisitorFlow',{islandIds:this.myislandId}).then(res=>{
                    if(res.data.code===0){
                        let resData = res.data.data;
                        this.jjrYearPersonNum = resData.headcount;
                        let maxNum = resData.holidayNums>resData.workdayNums?resData.holidayNums:resData.workdayNums;
                        let maxNumLen = maxNum.toString().length;
                        let sfbl = maxNumLen==0?0:Math.pow(10,(maxNumLen==1?1:(maxNumLen-Math.pow(2,maxNumLen-1))));//缩放比例   1\1  2\0  3\-1  4\-2  5\-3 n-2的n-1次方

                        this.initCahrtJjrrzfxChart(resData,sfbl);
                    }else this.$message.error(res.data.msg);
                })
            },
            getParametricEquation(
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                h
            ) {
                // 计算
                let midRatio = (startRatio + endRatio) / 2;

                let startRadian = startRatio * Math.PI * 2;
                let endRadian = endRatio * Math.PI * 2;
                let midRadian = midRatio * Math.PI * 2;

                // 如果只有一个扇形，则不实现选中效果。
                // if (startRatio === 0 && endRatio === 1) {
                //     isSelected = false;
                // }
                isSelected = false;
                // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
                k = typeof k !== "undefined" ? k : 1 / 3;

                // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
                let offsetX = isSelected ? Math.sin(midRadian) * 0.1 : 0;
                let offsetY = isSelected ? Math.cos(midRadian) * 0.1 : 0;

                // 计算高亮效果的放大比例（未高亮，则比例为 1）
                let hoverRate = isHovered ? 1.05 : 1;

                // 返回曲面参数方程
                return {
                u: {
                    min: -Math.PI,
                    max: Math.PI * 3,
                    step: Math.PI / 32,
                },

                v: {
                    min: 0,
                    max: Math.PI * 2,
                    step: Math.PI / 20,
                },

                x: function (u, v) {
                    if (u < startRadian) {
                    return (
                        offsetX +
                        Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
                    );
                    }
                    if (u > endRadian) {
                    return (
                        offsetX +
                        Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
                    );
                    }
                    return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
                },

                y: function (u, v) {
                    if (u < startRadian) {
                    return (
                        offsetY +
                        Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
                    );
                    }
                    if (u > endRadian) {
                    return (
                        offsetY +
                        Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
                    );
                    }
                    return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
                },

                z: function (u, v) {
                    if (u < -Math.PI * 0.5) {
                    return Math.sin(u);
                    }
                    if (u > Math.PI * 2.5) {
                    return Math.sin(u) * h * 0.1;
                    }
                    return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
                },
                };
            },
            // 生成模拟 3D 饼图的配置项
            getPie3D(pieData, internalDiameterRatio) {
                let series = [];
                let sumValue = 0;
                let startValue = 0;
                let endValue = 0;
                let legendData = [];
                let k =
                typeof internalDiameterRatio !== "undefined"
                    ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
                    : 1 / 3;

                // 为每一个饼图数据，生成一个 series-surface 配置
                for (let i = 0; i < pieData.length; i++) {
                sumValue += pieData[i].value;

                let seriesItem = {
                    name:
                    typeof pieData[i].name === "undefined"
                        ? `series${i}`
                        : pieData[i].name,
                    type: "surface",
                    parametric: true,
                    wireframe: {
                    show: false,
                    },
                    pieData: pieData[i],
                    pieStatus: {
                    selected: false,
                    hovered: false,
                    k: 1 / 10,
                    },
                };

                if (typeof pieData[i].itemStyle != "undefined") {
                    let itemStyle = {};

                    typeof pieData[i].itemStyle.color != "undefined"
                    ? (itemStyle.color = pieData[i].itemStyle.color)
                    : null;
                    typeof pieData[i].itemStyle.opacity != "undefined"
                    ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
                    : null;

                    seriesItem.itemStyle = itemStyle;
                }
                series.push(seriesItem);
                }

                // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
                // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
                for (let i = 0; i < series.length; i++) {
                endValue = startValue + series[i].pieData.value;

                series[i].pieData.startRatio = startValue / sumValue;
                series[i].pieData.endRatio = endValue / sumValue;
                series[i].parametricEquation = this.getParametricEquation(
                    series[i].pieData.startRatio,
                    series[i].pieData.endRatio,
                    false,
                    false,
                    k,
                    series[i].pieData.value
                );

                startValue = endValue;

                legendData.push(series[i].name);
                }
                return series;
            },
            initCahrtJjrrzfxChart(resData,sfbl){
                const optionsData = [
                    {
                        name: "工作日",
                        value: resData.workdayNums,
                        itemStyle: {
                            color: "#036FFE",
                        }
                    },
                    {
                        name: "节假日",
                        value: resData.holidayNums,
                        itemStyle: {
                            color: "#1CFFAC",
                        }
                    }
                ];
                const series = this.getPie3D(optionsData, 0.8);
                series.push({
                    name: "pie2d",
                    type: "pie",
                    label: {
                        show:false,
                    },
                    labelLine: {
                        show:false,
                    },
                    startAngle: -30, //起始角度，支持范围[0, 360]。
                    clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
                    radius: ["40%", "60%"],
                    center: ["50%", "50%"],
                    data: optionsData,
                    itemStyle: {
                        opacity: 0,
                    },
                });
                // 准备待返回的配置项，把准备好的 legendData、series 传入。
                let option = {
                    legend: {
                        orient: "vertical",
                        data: ["工作日", "节假日"],
                        textStyle: {
                            color: "#373737",
                            fontSize: "12px",
                            rich: {
                                name: {
                                    color: '#C6D7F1',
                                    fontSize: 14,
                                    fontWeight: 400,
                                    padding:[0,0,0,6]
                                },
                                num:{
                                    color: '#C6D7F1',
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                    padding:[0,0,0,12]
                                },
                                bl:{
                                    color: '#C6D7F1',
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                    padding:[0,0,0,12]
                                }
                            }
                        },
                        top: "center",
                        right: "2%",
                        itemGap: 22,
                        itemHeight: 8,
                        itemWidth: 8,
                        formatter: function(name){
                            let bl = name=='工作日'?resData.workdayRatio:resData.holidayRatio;
                            let sz = name=='工作日'?resData.workdayNums:resData.holidayNums;
                            return `{name|${name}}{num|${sz}}{bl|${bl+'%' || '0%'}}`
                        }
                    },
                    animation: true,
                    tooltip: {
                        formatter: (params) => {
                            if (
                                params.seriesName !== "mouseoutSeries" &&
                                params.seriesName !== "pie2d"
                            ) {
                                return `${
                                    params.seriesName
                                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                                    params.color
                                };"></span>${
                                    option.series[params.seriesIndex].pieData.value + "人"
                                }`;
                            }
                        },
                        textStyle: {
                            fontSize: 14,
                        },
                    },
                    title: {
                        x: "center",
                        top: "20",
                        textStyle: {
                            color: "#fff",
                            fontSize: 22,
                        },
                    },
                    backgroundColor: "transparent",
                    labelLine: {
                        show: true,
                        lineStyle: {
                            color: "#7BC0CB",
                        },
                        normal: {
                            show: true,
                            length: 10,
                            length2: 10,
                        },
                    },
                    label: {
                        show: true,
                        position: "outside",
                        formatter: "{b} \n{d}%",
                        textStyle: {
                            color: "#fff",
                            fontSize: "14px",
                        },
                    },
                    xAxis3D: {
                        min: -1,
                        max: 1,
                    },
                    yAxis3D: {
                        min: -1,
                        max: 1,
                    },
                    zAxis3D: {
                        min: -1,
                        max: 1,
                    },
                    grid3D: {
                        show: false,
                        boxHeight: sfbl*8,
                        //top: '30%',
                        left: "1%",
                        top: -15,
                        width: "60%",
                        // environment: "rgba(255,255,255,0)",
                        viewControl: {
                            distance: 130,
                            alpha: 35,
                            beta: 15,
                            autoRotate: false, // 自动旋转
                            rotateSensitivity: 1,
                            zoomSensitivity: 0,
                            panSensitivity: 0,
                        }
                    },
                    series: series,
                };
                //构建3d饼状图
                let myChart = echarts.init(this.$refs.jjrrzfxChart);
                myChart.setOption(option);
                this.resizeEcharts(this.$refs.jjrrzfxChart);
            },
            //酒店预约排行榜(月)
            getDataHotelOrderMonth(){
                this.hotelOrderList = [];
                this.$http.post('/sys/hotel/screen/getOrderVolumeRankList',{
                    islandIds:this.myislandId
                }).then(res=>{
                    if(res.data.code===0){
                        res.data.data.forEach(d=>{
                            this.hotelOrderList.push({
                                name:d.homestayName,
                                num:d.orderNums
                            })
                        })
                        this.$nextTick(() => {
                            const scrollListDom = document.querySelector('.scroll-list-seamless-phb')
                            if (scrollListDom) {
                                const scrollListDomLast = scrollListDom.querySelectorAll('li')[scrollListDom.querySelectorAll('li').length - 1];
                                let liLength = scrollListDom.querySelectorAll('li').length;
                                let liHeight = scrollListDomLast.clientHeight+10;
                                let liSumHeight = liHeight*liLength;
                                let parentHeight = document.querySelector('.tableDiv_phb').clientHeight;
                                let autoPlay = liSumHeight>parentHeight;
                                if (autoPlay) {
                                    this.copyDataPhb = this.hotelOrderList;
                                    this.$refs.vueSeamlessPhbRef._startMove();
                                }
                            }
                        })
                    }else this.$message.error(res.data.msg);
                })
            },
            // 年度客流对比
            initChartNdyyqs(){
                this.$http.post('/sys/hotel/screen/getAnnualBookTrends',{
                    islandIds:this.myislandId
                }).then(res=>{
                    if(res.data.code===0){
                        let currentYear = new Date().getFullYear();
                        let lastYear = currentYear - 1;
                        let cyData = res.data.data.filter(d=>d.dateYear==currentYear);
                        let lyData = res.data.data.filter(d=>d.dateYear==lastYear);

                        let Data = ['1','2','3','4','5','6','7','8','9','10','11','12'];
                        let lastYearData = [];
                        let currentYearData = [];
                        Data.forEach(d=>{
                            let ct = cyData.find(c=>c.dateMonth==d);
                            let lt = lyData.find(l=>l.dateMonth==d);
                            currentYearData.push(ct?ct.visitorNums:0);
                            lastYearData.push(lt?lt.visitorNums:0);
                        })
                        let xData = [];
                        Data.forEach(d=>xData.push(d+"月"));
                        this.initChartNdyyqsChart(lastYear,currentYear,xData,lastYearData,currentYearData);
                    }else this.$message.error(res.data.msg);
                })
            },
            initChartNdyyqsChart(lastYear,currentYear,Data,lastYearData,currentYearData){
                let myChart = echarts.init(this.$refs.ndyyqsChart);
                const offsetX = 8;
                const offsetY = 4;
                // 绘制左侧面
                const CubeLeft = echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0,
                    },
                    buildPath: function (ctx, shape) {
                        // 会canvas的应该都能看得懂，shape是从custom传入的
                        const xAxisPoint = shape.xAxisPoint;
                        const c0 = [shape.x, shape.y];
                        const c1 = [shape.x - offsetX, shape.y - offsetY];
                        const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
                        const c3 = [xAxisPoint[0], xAxisPoint[1]];
                        ctx
                            .moveTo(c0[0], c0[1])
                            .lineTo(c1[0], c1[1])
                            .lineTo(c2[0], c2[1])
                            .lineTo(c3[0], c3[1])
                            .closePath();
                    },
                });
                // 绘制右侧面
                const CubeRight = echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0,
                    },
                    buildPath: function (ctx, shape) {
                        const xAxisPoint = shape.xAxisPoint;
                        const c1 = [shape.x, shape.y];
                        const c2 = [xAxisPoint[0], xAxisPoint[1]];
                        const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
                        const c4 = [shape.x + offsetX, shape.y - offsetY];
                        ctx
                            .moveTo(c1[0], c1[1])
                            .lineTo(c2[0], c2[1])
                            .lineTo(c3[0], c3[1])
                            .lineTo(c4[0], c4[1])
                            .closePath();
                    },
                });
                // 绘制顶面
                const CubeTop = echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0,
                    },
                    buildPath: function (ctx, shape) {
                        const c1 = [shape.x, shape.y];
                        const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
                        const c3 = [shape.x, shape.y - offsetX];
                        const c4 = [shape.x - offsetX, shape.y - offsetY];
                        ctx
                            .moveTo(c1[0], c1[1])
                            .lineTo(c2[0], c2[1])
                            .lineTo(c3[0], c3[1])
                            .lineTo(c4[0], c4[1])
                            .closePath();
                    },
                });

                // 注册三个面图形
                echarts.graphic.registerShape("CubeLeft", CubeLeft);
                echarts.graphic.registerShape("CubeRight", CubeRight);
                echarts.graphic.registerShape("CubeTop", CubeTop);

                let option = {
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'rgba(13,5,30,.6)',
                        borderWidth: 1,
                        borderColor: '#4ddd8f',
                        padding: 5,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    legend: {
                        right: 10,
                        top: 0,
                        textStyle: {
                            fontSize: 14,
                            color: '#C6D7F1'
                        },
                        itemWidth: 20,
                        itemHeight: 6
                    },
                    grid: {
                        left: '1%',
                        right: '0%',
                        top: '20%',
                        bottom: '6%',
                        containLabel: true,
                    },
                    xAxis: {
                        type: 'category',
                        data: Data,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisTick: {
                            show: true,
                            length: 4,
                            lineStyle: {
                                color: 'rgba(199,211,229,0.5)'
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(199,211,229,0.5)'
                            }
                        },
                        axisLabel: {
                            color: '#c7d3e5'
                        }
                    },
                    yAxis: {
                        name:'单位:人',
                        type: 'value',
                        nameTextStyle: {
                            fontSize: 12,
                            color: '#C6D7F1',
                            fontWeight: 400,
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                width: 1,
                                color: '#545454'
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(199,211,229,0.3)',
                                width: 1,
                                type: 'dashed'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#c7d3e5'
                        }
                    },
                    series: [{
                            name: lastYear+"年",
                            type: "custom",
                            renderItem: (params, api) => {
                                const location = api.coord([api.value(0), api.value(1)]);
                                const xAxisPoint = api.coord([api.value(0), 0]);
                                const distance = 15;
                                return {
                                    type: "group",
                                    children: [{
                                            type: "CubeLeft",
                                            shape: {
                                                api,
                                                xValue: api.value(0),
                                                yValue: api.value(1),
                                                x: location[0] - distance,
                                                y: location[1],
                                                xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
                                            },
                                            style: {
                                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                        offset: 0,
                                                        color: '#00BFF4',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: 'rgba(0,100,181,0.14)'
                                                    }
                                                ]),
                                            },
                                        },
                                        {
                                            type: "CubeRight",
                                            shape: {
                                                api,
                                                xValue: api.value(0),
                                                yValue: api.value(1),
                                                x: location[0] - distance,
                                                y: location[1],
                                                xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
                                            },
                                            style: {
                                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                        offset: 0,
                                                        color: '#006DFF',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: 'rgba(0,100,181,0.14)'
                                                    }
                                                ]),
                                            },
                                        },
                                        {
                                            type: "CubeTop",
                                            shape: {
                                                api,
                                                xValue: api.value(0),
                                                yValue: api.value(1),
                                                x: location[0] - distance,
                                                y: location[1],
                                                xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
                                            },
                                            style: {
                                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                        offset: 0,
                                                        color: '#00BFF4',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: '#A5E2FF'
                                                    }
                                                ]),
                                            },
                                        },
                                    ],
                                };
                            },
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: "#6AAAFF",
                                    },
                                    {
                                        offset: 1,
                                        color: "#046EFE",
                                    },
                                ]),
                            },
                            data: lastYearData,
                        },
                        {
                            name: currentYear+"年",
                            type: "custom",
                            renderItem: (params, api) => {
                                const location = api.coord([api.value(0), api.value(1)]);
                                const xAxisPoint = api.coord([api.value(0), 0]);
                                const distance = 15;
                                return {
                                    type: "group",
                                    children: [{
                                            type: "CubeLeft",
                                            shape: {
                                                api,
                                                xValue: api.value(0),
                                                yValue: api.value(1),
                                                x: location[0] + distance,
                                                y: location[1],
                                                xAxisPoint: [xAxisPoint[0] + distance, xAxisPoint[1]],
                                            },
                                            style: {
                                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                        offset: 0,
                                                        color: '#02D8EA',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: 'rgba(0,201,217,0.4)'
                                                    }
                                                ]),
                                            },
                                        },
                                        {
                                            type: "CubeRight",
                                            shape: {
                                                api,
                                                xValue: api.value(0),
                                                yValue: api.value(1),
                                                x: location[0] + distance,
                                                y: location[1],
                                                xAxisPoint: [xAxisPoint[0] + distance, xAxisPoint[1]],
                                            },
                                            style: {
                                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                        offset: 0,
                                                        color: '#02D8EA',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: 'rgba(0,201,217,0.4)'
                                                    }
                                                ]),
                                            },
                                        },
                                        {
                                            type: "CubeTop",
                                            shape: {
                                                api,
                                                xValue: api.value(0),
                                                yValue: api.value(1),
                                                x: location[0] + distance,
                                                y: location[1],
                                                xAxisPoint: [xAxisPoint[0] + distance, xAxisPoint[1]],
                                            },
                                            style: {
                                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                        offset: 0,
                                                        color: '#00BFF4',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: '#A5E2FF'
                                                    }
                                                ]),
                                            },
                                        },
                                    ],
                                };
                            },
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: "#00BFF4",
                                    },
                                    {
                                        offset: 1,
                                        color: "#A5E2FF",
                                    },
                                ]),
                            },
                            data: currentYearData,
                        }
                    ],
                };
                myChart.setOption(option);
                this.resizeEcharts(this.$refs.ndyyqsChart);
            },
            // 近7天预约趋势
            initChartYyqs(){
                this.$http.post('/sys/hotel/screen/getNext7DaysBookTrends',{
                    islandIds:this.myislandId
                }).then(res=>{
                    if(res.data.code===0){
                        let Data = [];
                        let yzyData = [];
                        let yyyData = [];
                        let kzData = [];
                        let bhlData = [];
                        res.data.data.forEach(d=>{
                            Data.push(d.dateDay);
                            yzyData.push(d.usageRooms);
                            yyyData.push(d.bookRooms);
                            kzData.push(d.vacantRooms);
                            bhlData.push(d.ratio);
                        })
                        this.initChartYyqsChart(Data,yzyData,yyyData,kzData,bhlData);
                    }else this.$message.error(res.data.msg);
                })
            },
            initChartYyqsChart(Data,yzyData,yyyData,kzData,bhlData){
                let myChart = echarts.init(this.$refs.yyqsChart);
                let basicColors = [
                    ['#89FCCC','#00FF95'],
                    ['#34ABFF','#006BFE'],
                    ['#FF89B0','#E83B75']
                ];
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'rgba(13,5,30,.6)',
                        borderWidth: 1,
                        borderColor: '#4ddd8f',
                        padding: 5,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    grid: {
                        top: '25%',
                        left: '5%',
                        right: '5%',
                        bottom: '5%',
                        containLabel: true
                    },
                    legend: {
                        right: 10,
                        top: 10,
                        textStyle: {
                            fontSize: 12,
                            color: '#7299D4'
                        },
                        itemWidth: 8,
                        itemHeight: 8
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: Data,
                            axisPointer: {
                                type: 'shadow'
                            },
                            axisTick: {
                                show: true,
                                length: 4,
                                lineStyle: {
                                    color: 'rgba(199,211,229,0.5)'
                                }
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: 'rgba(199,211,229,0.5)'
                                }
                            },
                            axisLabel: {
                                color: '#c7d3e5'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            name:'单位:人',
                            type: 'value',
                            nameTextStyle: {
                            color: '#c7d3e5'
                            },
                            axisLabel: {
                                color: '#c7d3e5'
                            },
                            axisTick: {
                                show: true,
                                length: 4,
                                lineStyle: {
                                    color: 'rgba(64,136,254,1)'
                                }
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: 'rgba(199,211,229,0.3)',
                                    width: 1,
                                    type: 'dashed'
                                }
                            }
                        },
                        {
                            type: 'value',
                            scale: true,
                            splitLine:{
                                show:true,
                                lineStyle:{
                                    type:'dashed',
                                    color: 'rgba(199,211,229,0.3)'
                                }
                            },
                            min: 0,
                            axisLabel : {
                                formatter: '{value}%',  //右侧以百分比进行展示
                                show: true,
                                textStyle: {
                                    color: '#c7d3e5',
                                }
                            },
                            nameTextStyle: {
                                color: '#c7d3e5'
                            },
                            axisTick: {
                                show: true,
                                length: 4,
                                lineStyle: {
                                    color: 'rgba(64,136,254,1)'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '已占用',
                            type: 'bar',
                            barWidth: 6,
                            data: yzyData,
                            itemStyle: {
                                normal: {
                                    color: this.genLinearGradient(basicColors[0]),
                                    barBorderRadius: 3
                                }
                            }
                        },
                        {
                            name: '已预约',
                            type: 'bar',
                            barWidth: 6,
                            itemStyle: {
                                normal: {
                                    color: this.genLinearGradient(basicColors[1]),
                                    barBorderRadius: 3
                                }
                            },
                            data: yyyData
                        },
                        {
                            name: '空置',
                            type: 'bar',
                            barWidth: 6,
                            itemStyle: {
                                normal: {
                                    color: this.genLinearGradient(basicColors[2]),
                                    barBorderRadius: 3
                                }
                            },
                            data: kzData
                        },
                        {
                            name: '订单饱和率',
                            type: 'line',
                            smooth:true,
                            yAxisIndex: 1,
                            symbol: 'none',
                            data: bhlData,
                            itemStyle: {
                                color: '#B315FF'
                            }
                        }
                    ]
                };
                myChart.setOption(option);
                this.resizeEcharts(this.$refs.yyqsChart);
            },
            // 生成渐变色
            genLinearGradient(colors) {
                const color = {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                    {
                        offset: 0,
                        color: colors[0] // 0%处的颜色
                    },
                    {
                        offset: 1,
                        color: colors[1] // 100%处的颜色
                    }
                    ],
                    global: false
                }
                return color
            },
            initChartRzjj(){
                this.$http.post('/sys/hotel/screen/getAvgPriceByIsland',{
                    islandIds:this.myislandId
                }).then(res=>{
                    if(res.data.code==0){
                        let xData = res.data.data.map(item=>{
                            return item.islandName
                        })
                        let yData = res.data.data.map(item=>{
                            return item.avgPrice
                        })
                        this.$nextTick(()=>{
                            this.getRzjjChartData(xData,yData);
                        })
                    }
                })
            },
            getRzjjChartData(xData,yData){
                let myChart = echarts.init(this.$refs.rzjjChart);
                const offsetX = 10
                const offsetY = 5
                // 绘制左侧面
                const CubeLeft = echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0,
                    },
                    buildPath: function (ctx, shape) {
                        // 会canvas的应该都能看得懂，shape是从custom传入的
                        const xAxisPoint = shape.xAxisPoint
                        const c0 = [shape.x, shape.y]
                        const c1 = [shape.x - offsetX, shape.y - offsetY]
                        const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]
                        const c3 = [xAxisPoint[0], xAxisPoint[1]]
                        ctx
                        .moveTo(c0[0], c0[1])
                        .lineTo(c1[0], c1[1])
                        .lineTo(c2[0], c2[1])
                        .lineTo(c3[0], c3[1])
                        .closePath()
                    },
                })
                // 绘制右侧面
                const CubeRight = echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0,
                    },
                    buildPath: function (ctx, shape) {
                        const xAxisPoint = shape.xAxisPoint
                        const c1 = [shape.x, shape.y]
                        const c2 = [xAxisPoint[0], xAxisPoint[1]]
                        const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY]
                        const c4 = [shape.x + offsetX, shape.y - offsetY]
                        ctx
                        .moveTo(c1[0], c1[1])
                        .lineTo(c2[0], c2[1])
                        .lineTo(c3[0], c3[1])
                        .lineTo(c4[0], c4[1])
                        .closePath()
                    },
                })
                // 绘制顶面
                const CubeTop = echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0,
                    },
                    buildPath: function (ctx, shape) {
                        const c1 = [shape.x, shape.y]
                        const c2 = [shape.x + offsetX, shape.y - offsetY] //右点
                        const c3 = [shape.x, shape.y - offsetX]
                        const c4 = [shape.x - offsetX, shape.y - offsetY]
                        ctx
                        .moveTo(c1[0], c1[1])
                        .lineTo(c2[0], c2[1])
                        .lineTo(c3[0], c3[1])
                        .lineTo(c4[0], c4[1])
                        .closePath()
                    },
                })
                // 注册三个面图形
                echarts.graphic.registerShape('CubeLeft', CubeLeft)
                echarts.graphic.registerShape('CubeRight', CubeRight)
                echarts.graphic.registerShape('CubeTop', CubeTop)
                
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                        },
                        extraCssText: 'box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);',
                        textStyle: {
                            fontSize: 12,
                            color: '#fff',
                        },
                        formatter: (params, ticket, callback) => {
                            const item = params[1]
                            return item.name + ' : ' + item.value + '元'
                        },
                    },
                    grid: {
                        left: '4%',
                        right: '0%',
                        top: '16%',
                        bottom: '1%',
                        containLabel: true,
                    },
                    xAxis: {
                        type: 'category',
                        data: xData,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                width: 1,
                                color: '#035192'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#C6D7F1'
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '单位：元',
                        nameTextStyle: {
                            color: '#C6D7F1',
                            fontWeight: 400,
                            fontSize: 12
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                width: 1,
                                color: '#545454'
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#C6D7F1'
                        }
                    },
                    series: [
                        {
                            type: 'custom',
                            renderItem: (params, api) => {
                                const location = api.coord([api.value(0), api.value(1)])
                                return {
                                    type: 'group',
                                    children: [
                                        {
                                            type: 'CubeLeft',
                                            shape: {
                                                api,
                                                xValue: api.value(0),
                                                yValue: api.value(1),
                                                x: location[0],
                                                y: location[1],
                                                xAxisPoint: api.coord([api.value(0), 0]),
                                            },
                                            style: {
                                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                {
                                                    offset: 0,
                                                    color: '#00BFF4',
                                                },
                                                {
                                                    offset: 0.35,
                                                    color: '#0064B5'
                                                },
                                                {
                                                    offset: 1,
                                                    color: 'transparent'
                                                }
                                                ]),
                                            },
                                        },
                                        {
                                            type: 'CubeRight',
                                            shape: {
                                                api,
                                                xValue: api.value(0),
                                                yValue: api.value(1),
                                                x: location[0],
                                                y: location[1],
                                                xAxisPoint: api.coord([api.value(0), 0]),
                                            },
                                            style: {
                                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                {
                                                    offset: 0,
                                                    color: '#0064B5',
                                                },
                                                {
                                                    offset: 0.35,
                                                    color: '#00BFF4'
                                                },
                                                {
                                                    offset: 1,
                                                    color: 'transparent'
                                                }
                                                ]),
                                            },
                                        },
                                        {
                                            type: 'CubeTop',
                                            shape: {
                                                api,
                                                xValue: api.value(0),
                                                yValue: api.value(1),
                                                x: location[0],
                                                y: location[1],
                                                xAxisPoint: api.coord([api.value(0), 0]),
                                            },
                                            style: {
                                                fill: '#00BFF4'
                                            }
                                        }
                                    ]
                                }
                            },
                            data: yData,
                        },
                        {
                            type: 'bar',
                            itemStyle: {
                                color: 'transparent',
                            },
                            data: yData,
                        }
                    ]
                }
                myChart.setOption(option);
                this.resizeEcharts(this.$refs.rzjjChart);
            },
            // 客流排名
            getKlpmData(){
                this.klRankingList = [];
                this.$http.post('/sys/hotel/screen/getHotCityRankList',{
                    islandIds:this.myislandId
                }).then(res=>{
                    if(res.data.code===0){
                        let sum = res.data.data.reduce((cur,pre)=>cur+pre.visitorNums,0);
                        res.data.data.forEach(d=>{
                            this.klRankingList.push({
                                city:d.cityName,
                                num:d.visitorNums,
                                bl:(d.visitorNums/sum*100).toFixed(2)||0
                            })
                        })
                        this.$nextTick(() => {
                            const scrollListDom = document.querySelector('.scroll-list-seamless')
                            if (scrollListDom) {
                                const scrollListDomLast = scrollListDom.querySelectorAll('li')[scrollListDom.querySelectorAll('li').length - 1];
                                let liLength = scrollListDom.querySelectorAll('li').length;
                                let liHeight = scrollListDomLast.clientHeight;
                                let liSumHeight = liHeight*liLength;
                                let parentHeight = document.querySelector('.mjzyx_pm').clientHeight;
                                let autoPlay = liSumHeight>parentHeight;
                                if (autoPlay) {
                                    this.copyDatakL = this.klRankingList;
                                    this.$refs.vueSeamlessRef._startMove();
                                }
                            }
                        })
                    }else this.$message.error(res.data.msg);
                })
            },

            //解决图表鼠标悬浮错位问题
            resizeEcharts(ele) {
                let rate = 1920 / window.innerWidth;
                if ( ele.style ) {
                    ele.style.zoom = 1 * rate;
                    ele.style.transform = `scale(${1 / rate})`;
                    ele.style.transformOrigin = 'top left';
                }
            },
            //切换岛屿
            changeTown(id,index){
                this.townIndex = index;
                if(!id) return
                this.myislandId = id;
                this.init();
                clearInterval(refreshTimer);
                refreshTimer = setInterval(() => {
                    this.init();
                }, 15000);
            }
        }
    }
</script>
<style scoped lang="scss">
    .screen-box{
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        z-index: 9999;
        background-image: url(../../../assets/largescreen/new/bg_zong.png) !important;
        background-size: 100% 100%;

        .screen-wrapper{
            position: relative;
            .dp_map{
                width: 980px;
                height: 980px;
                background-image: url(../../../assets/largescreen/new/m_map_bg.png);
                background-size: 100% 100%;
                position: absolute;
                top: 0;
                left: 50%;
                margin-left: -490px;
            }

            .map_town{
                width: 68px;
                height: 41px;
                background: url('../../../assets//largescreen/town_bg.png');
                position: absolute;
                font-size: 14px;
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 400;
                color: #FFFFFF;
                text-align: center;
                padding-top: 6px;
                cursor: pointer;
                &.town_active{
                    width: 84px;
                    height: 78px;
                    font-size: 16px;
                    background: url('../../../assets//largescreen/town_active_bg.png');
                    padding-top: 7px;
                    margin-left: -8px;
                    margin-top: -37px;
                }
            }
        }

        .dp_top{
            width: 100%;
            height: 118px;
            background-image: url(../../../assets/largescreen/new/top_title.png);
            background-position: center center;
            background-size: 100% 100%;
            position: relative;

            .dt_back_weather{
                position: absolute;
                top: 18px;
                left: 39px;
                display: flex;
                align-items: center;
                .dbw_fh{
                    width: 102px;
                    height: 38px;
                    cursor: pointer;
                }
                .dbw_tianqi{
                    display: flex;
                    align-items: center;
                    margin-left: 19px;
                    img{
                        width: 24px;
                        height: 22px;
                    }
                    .tianqi{
                        margin-left: 6px;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 16px;
                        color: #C6D7F1;
                        line-height: 22px;
                    }
                }
            }

            .dt_type{
                width: 180px;
                height: 48px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-position: center center;
                background-size: 100% 100%;
                position: absolute;
                top: 52px;
                cursor: pointer;
                z-index: 3;
                &>div{
                    font-family: YouSheBiaoTiHei;
                    font-size: 20px;
                    color: #FFFFFF;
                }
                &.selected_left{
                    background-image: url(../../../assets/largescreen//new/top_text_bg_selected_left.png);
                }
                &.selected_right{
                    background-image: url(../../../assets/largescreen//new/top_text_bg_selected_right.png);
                }
            }
            .selected_left,.selected_right{
                &>div{
                    background-image: linear-gradient(to bottom, #FFFFFF 0%, #90DEFF 100%);
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }
            .dt_type_ykhx,.dt_type_jq{
                background-image: url(../../../assets/largescreen//new/top_text_bg1.png);
            }
            .dt_type_jdms,.dt_type_jt{
                background-image: url(../../../assets/largescreen//new/top_text_bg2.png);
            }
            .dt_type_ykhx{
                left: 200px;
            }
            .dt_type_jq{
                left: 380px;
            }
            .dt_type_jdms{
                right: 380px;
            }
            .dt_type_jt{
                right: 200px;
            }

            .dt_time{
                position: absolute;
                top: 26px;
                right: 37px;
                font-family: DS, DS;
                font-size: 20px;
                color: #FFFFFF;
                line-height: 22px;
                text-align: left;
                background-image: linear-gradient(to bottom, #FAFCFF 0%, #44A7FE 100%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            .dt_click{
                width: 670px;
                height: 100%;
                position: absolute;
                top: 0;
                left: 50%;
                margin-left: -335px;
                cursor: pointer;
                z-index: 2;
            }
        }

        .dp_middle{
            width: 100%;
            height: calc(100% - 165px);
            display: flex;
            .dm_left,.dm_right{
                width: 470px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }
            .dm_left{
                padding: 0 24px 0 26px;
            }
            .dm_center{
                width: calc(100% - 940px);
                position: relative;
                .dmc_map{
                    padding: 26px 23px 0;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .dmcm_nums{
                        display: flex;
                        .dn_pte{
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            &:nth-child(2){
                                margin: 0 80px;
                            }
                            .title{
                                font-family: PingFang-SC, PingFang-SC;
                                font-weight: bold;
                                font-size: 16px;
                                color: #C6D7F1;
                                line-height: 22px;
                            }
                            .nums{
                                display: flex;
                                .n_item{
                                    width: 40px;
                                    height: 56px;
                                    line-height: 56px;
                                    text-align: center;
                                    background: url(../../../assets/largescreen/num_bg.png) no-repeat;
                                    background-size: 100% 100%;
                                    margin: 5px 2px 0 2px;
                                    font-size: 30px;
                                    font-family: D-DINExp, D-DINExp;
                                    font-weight: bold;
                                    color: #C6D7F1;
                                    &:first-child{
                                        margin-left: 0;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .dm_right{
                padding: 0 26px 0 24px;
            }
        }

        .dp_bottom{
            width: 100%;
            height: 47px;
            background-image: url(../../../assets/largescreen/new/bg_bottom.png);
            background-position: center center;
            background-size: 100% 100%;
        }

        .box{
            position: relative;
            background: linear-gradient( 180deg, rgba(7,27,67,0.1) 0%, rgba(13,46,89,0.2) 100%), radial-gradient( 82% 15% at 50% 100%, rgba(39,115,255,0.1) 0%, rgba(39,115,255,0) 100%);
            .b_title{
                width: 420px;
                height: 44px;
                background: url("../../../assets/largescreen/y6.png") no-repeat;
                padding-left: 33px;
                line-height: 36px;
                font-size: 20px;
                font-family: YouSheBiaoTiHei;
                color: #FFFFFF;
            }
            &.c_b_box{
                width: 100%;
                height: 300px;
                padding: 0 20px;
                box-sizing: border-box;
                position: absolute;
                bottom: 0;
                left: 0;
            }
        }

        .dp_box{
            width: 420px;
            height: 300px;
            background: linear-gradient( 180deg, rgba(7,27,67,0.1) 0%, rgba(13,46,89,0.2) 100%), radial-gradient( 82% 15% at 50% 100%, rgba(39,115,255,0.1) 0%, rgba(39,115,255,0) 100%);
            position: relative;
        }

        .db_content{
            width: 100%;
            height: calc(100% - 44px);
            .chart{
                width: 100%;
                height: 100%;
                position: relative;
                z-index: 998;

                .cb_title{
                    width: calc(100% - 20px);
                    height: 40px;
                    background: linear-gradient(270deg, rgba(39,115,255,0.4) 0%, rgba(39,115,255,0.25) 23%, rgba(39,115,255,0.06) 100%);
                    border-radius: 2px;
                    border: 1px solid #294178;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: 10px 10px 0;
                    img{
                        width: 24px;
                        height: 24px;
                    }
                    p{
                        margin-left: 20px;
                        font-size: 14px;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        color: #C6D7F1;
                        display: flex;
                        align-items: center;
                        span{
                            font-size: 18px;
                            font-family: DINAlternate, DINAlternate;
                            font-weight: bold;
                            color: #FFFFFF;
                            margin: 0 10px;
                        }
                    }
                }
                .cb_chart_jjr{
                    height: calc(100% - 50px);
                    &>div{
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .mjzyx_pm{
                width:100%;
                height: 100%;
                padding:0 20px;
                box-sizing: border-box;
                overflow:hidden;
                ::v-deep .ul-scoll{
                    padding-left: 0 !important;
                }
                .mpm_item{
                    width:100%;
                    height:42px;
                    display:flex;
                    align-items:center;
                    justify-content:space-between;
                    .mpmi_left{
                        width:calc(100% - 80px);
                        display:flex;
                        align-items:center;
                        .mpmil_top{
                            width:47px;
                            height:24px;
                            background-repeat:no-repeat;
                            background-size:100% 100%;
                            display:flex;
                            align-items:center;
                            justify-content:center;
                            font-size: 12px;
                            font-family: YouSheBiaoTiHei;
                            color: #FFFFFF;
                        }
                        .mpmil_city{
                            margin-left:20px;
                            font-size: 14px;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            color: #C6D7F1;
                            text-align:right;
                        }
                        .mpmil_line{
                            width:1px;
                            height:42px;
                            background:#0A2840;
                            margin-left:10px;
                        }
                        .mpmil_bl{
                            width:calc(100% - 120px);
                            height: 6px;
                            background: #172640;
                            border-radius:0 3px 3px 0;
                            position:relative;
                            .mpmil_bl_bfb{
                                height:100%;
                                background: linear-gradient(270deg, #00BFF4 0%, rgba(4,110,255,0) 100%);
                                border-radius:0 3px 3px 0;
                            }
                        }
                    }
                    .mpmi_right{
                        font-size: 14px;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        color: #C6D7F1;
                    }
                }
            }

            .tableDiv_phb{
                width: 100%;
                height: 100%;
                padding:0 10px;
                box-sizing: border-box;
                overflow:hidden;
                ::v-deep .ul-scoll{
                    padding-left: 0 !important;
                }
                .td_item{
                    width: calc(100% - 10px);
                    height: 32px;
                    margin: 10px 10px 0;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-right: 29px;
                    box-sizing: border-box;
                    background: rgba(2,65,110,0.3);
                    .tdi_left{
                        display: flex;
                        align-items: center;
                        .tdil_top{
                            width: 47px;
                            height: 24px;
                            background-repeat: no-repeat;
                            background-size: 100% 100%;
                            line-height: 24px;
                            text-align: center;
                            font-size: 12px;
                            font-family: YouSheBiaoTiHei;
                            color: #FFFFFF;
                        }
                        .tdil_name{
                            margin-left: 16px;
                            font-size: 14px;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            color: #C6D7F1;
                        }
                    }
                    .tdi_right{
                        font-size: 14px;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        color: #C6D7F1;
                    }
                }
            }
        }
    }
</style>